Media Link's Free Web Animation Page #1

Welcome to Dale's Free Web Animation Page #1!

Here are some examples of simple animations which you can use in your web pages. I show the individual animations first and then grouped together to form sometimes unique horizontal rules. You can view the source of this page to see how it's done. There are many animations repeated on this page. Like I state below, they do get out of sync at times (which is interesting as well). If you are using Netscape 2.0b5 or above, try right-clicking in open space somewhere (this brings up a little "back" drop-down menu), when they seem to go into sync and pause, just left click anywhere else in the display area. Also, it helps to turn on scroll lock, it seems to keep the little things from going crazy as you scroll down the screen :)

Here are eight seperate simple animations. The names of these are quite simple as I will explain. Each animation is made up of four dots. Only one dot is seen at a time. If all the dots in the animations were seen at once, they would form a square. I have named the four dots, top-right, top-left, bottom-right and bottom-left. I have of course, abbreviated the names to tr, tl, br and bl respectfully. The first letter in the name of each animation represents the color. In the case of the ones I supplied here, I use "r" to designate "red". The next two letters designate on which dot the animation begins. If it is "tr", then the animation starts on the top-right dot. The last letter/s used in the animation designate the direction of rotation. I use "c" for "clockwise" and "cc" for "counter-clockwise". The first animation below is called "rtrc.gif". The first letter is "r" which means "red". The second two letters are "tr" wich stands for "top-right". The last letter is a "c" which means clockwise rotation. So we know that "rtrc.gif" here means a red animation that starts at the top right dot of the square and rotates clockwise.

(rbrcc.gif)

Example 1: I use "rtrc.gif" Over and over to form the line. A very simple effect but we're just getting started...

Example 2: Here, "rblc.gif" is used for every other "dot" and "rtlcc.gif" is used inbetween. It gives a back-and-forth motion that's a little more interesting than the example above...

Example 3: This one is an example of all the clockwise animations "ganged" together in order (top right, top left, bottom left and bottom right) to form a series. Then the series is repeated four more times to add width to the display. I call this a "repeated series". This provides the effect of little half-circles (at least as good as you can get with four dots) scrolling to the right. A nice little effect...

Example 4: Now, the series as in example 3 but reversed to make a mirror of example 3. I know, so what? Well, we need it for our next example coming up...

Examples 5 and 6: Now we make some compound lines. This lets us make cooler effects. In example 5 (the top one), All I did was combine examples 3 and 4 to get a much more interesting effect. Example 3 is above and 4 just below it. In example 6, the order is reversed. Example 4 is now above example 3. Now we're getting somewhere...

Example 7: Now here's where you have to use your imagination to form more interesting effects. I actually got out a piece of paper (yes I use that stuff sometimes) and drew four little circles in a square over and over in a row. Then I drew another one just like it enderneath it. In the first little square of circles, I colored in the top right circle and put a clockwise arrow so I knew it's rotation. Then I just looked at the next 4-circle square and colored in one that I thought might be interesting next to the previous one. I colored in the bottom right circle and decided a counter-clockwise rotation would be cool (little counter-clockwise arrow in the middle of this one). I kept playing around til I had four in a row that looked like they might be interesting together. Then of course, I repeated the series of four. So now I had a repeated series that looked kinda nice but to finish off the effect, I created another repeated series underneath this one to get a more "trick" effect. This one complimented the first. I just played around til the second series looked right with the first...

Example 8: Another set of repeated series that I made with the paper method above (trial and error actually)...

Example 9: One more paper method creation just for the heck of it. This is my last example for fun but please read on just a little more...

Alright, now that you've waded through my little creations formed with my easily amused mind, here's some comments about all this stuff. I have found that sometimes in Netscape 2.01, these animations (especially grouped in a page like this) get a little out of whack (sync). They get to doing some funky things I never planned on. They almost have a mind of their own and display some sporatic but really cool combinations. Ones that I sometimes attempt to recreate. I'm not really sure why this happens and even though they don't behave exactly as I planned, I still like it :) I thought I'd warn you, but then again, it probably happened to you while you were on this page. I also found out that rapidly moving the cursor over the animations that ran amuck can alter the syncronization and sometimes put it back right (or at least make other trick effects I didn't plan on).

I am going to make the same 8 little animations at the top in different colors soon so feel free to come back and get some. I also plan to make the same little animations in multi color, that is, the four dots in each little one won't be the same color. This should really increase variety. In addition to all this, I will be creating simple animations for forming into series as above but with more than four dots each. Yes, even more variety! So in other words, there are cooler things to come...

OK, that's more than enough for now. So grab these 8 little animations on the page here, copy the source file from this page, grab some paper and have at it! BUT, don't forget to come back for more...Enjoy!

See Ya',

Dale

Number of accesses since April 30th, 1996...

3099